<template>
    <div class="enter-work-resume">
        <div class="resume-content">
            <div class="resume-header">
                <el-tabs v-model="resumeActiveName" @tab-click="resumeClick">
                    <el-tab-pane label="简历管理" name="resume">
                        <div class="resume-form mt10">
                            <el-form :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm"
                                     label-position="left">
                                <el-row class="form-row" :gutter="20">
                                    <el-col :span="12">
<!--                                        <div class="flex-row-start">-->
                                            <el-form-item class="single-item" label="" prop="name">
                                                <el-select v-model="ruleForm.positionId" placeholder="请选择面试职位" style="width: 100%">
                                                    <el-option :label="job.jobTitle" :value="job.id"
                                                               v-for="job in jobCategoryList" :key="job.id"></el-option>
                                                </el-select>
                                            </el-form-item>
                                           <!-- <el-form-item class="single-item" label="" prop="type">
                                                <el-checkbox-group class="ml20" v-model="ruleForm.type">
                                                    <el-checkbox label="包含停招职位" name="1"></el-checkbox>
                                                </el-checkbox-group>
                                            </el-form-item>-->
<!--                                        </div>-->
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item class="single-item" label="简历状态" prop="status">
                                            <el-radio-group v-model="ruleForm.feedback">
                                                <!--                                                投递反馈状态 -2:不通过；-1:不合适；0:待处理；1:已邀请面试；2:已邀请复试；3:面试通过-->
                                                <el-radio label="">全部</el-radio>
                                                <el-radio :label="0">待处理</el-radio>
                                                <el-radio :label="1">已邀请面试</el-radio>
                                                <!--                                                <el-radio :label="2">已邀请复试</el-radio>-->
                                                <!--                                                <el-radio :label="3">面试通过</el-radio>-->
                                                <!--                                                <el-radio :label="-1">不合适</el-radio>-->
                                                <!--                                                <el-radio :label="-2">不通过</el-radio>-->
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row class="form-row" :gutter="20">
                                    <!--<el-col :span="12">
                                        <el-form-item label="简历来源" prop="resumeSource">
                                            <el-radio-group v-model="ruleForm.resumeSource">
                                                <el-radio label="">全部</el-radio>
                                                <el-radio :label="1">主动投递</el-radio>
                                                <el-radio :label="2">委托投递</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>-->
                                    <el-col :span="24">
                                        <el-form-item class="single-item" prop="keyword">
                                            <el-input style="width: 100%" v-model="ruleForm.keyword"
                                                      placeholder="请输入关键字">
                                                <!--                                                <span slot="suffix"><i class="el-icon-search"/> </span>-->
                                                <el-button slot="append" icon="el-icon-search"
                                                           @click="init(true)"></el-button>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="面试邀请" name="invite">
                        <div class="resume-form mt10">
                            <el-form :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm"
                                     label-position="left">
                                <el-row class="form-row" :gutter="20">
                                    <el-col :span="12">
                                        <div class="flex-row-start">
                                            <el-form-item class="single-item" label="" prop="name">
                                                <el-select v-model="ruleForm.region" placeholder="请选择面试职位">
                                                    <el-option :label="job.jobTitle" :value="job.id"
                                                               v-for="job in jobCategoryList" :key="job.id"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item class="single-item" label="" prop="type">
                                                <el-checkbox-group class="ml20" v-model="ruleForm.type">
                                                    <el-checkbox label="包含停招职位" name="1"></el-checkbox>
                                                </el-checkbox-group>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item class="single-item" label="查看状态" prop="name">
                                            <el-radio-group v-model="ruleForm.viewState">
                                                <el-radio label="">全部</el-radio>
                                                <el-radio label="0">对方已查看</el-radio>
                                                <el-radio label="1">对方未查看</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="已下载的简历" name="download"></el-tab-pane>
                    <el-tab-pane label="收藏的简历" name="star"></el-tab-pane>
                    <el-tab-pane label="谁看过我" name="who"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="resume-table enterprise-table">
                <div class="actions-bar">
                    <template v-if="resumeActiveName === 'download'">
                        <el-button type="primary" size="small" @click="saveToComputer" :disabled="!multipleSelection.length">保存到电脑</el-button>
                        <el-button type="primary" size="small" @click="sendToMail" :disabled="!multipleSelection.length">转发到邮箱</el-button>
                    </template>
                    <template v-if="resumeActiveName === 'star' || resumeActiveName === 'who'">
                        <el-button type="primary" size="small" @click="batchDelete" :disabled="!multipleSelection.length">删除</el-button>
                    </template>
                </div>
                <div class="table-content" v-if="!loading">
                    <div v-if="resumeActiveName == 'resume'">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                prop="statusText"
                                label="状态"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                label="姓名"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="基本信息"
                                :show-overflow-tooltip='true'
                                width="250">
                                <template slot-scope="scope">
                                    {{ scope.row.sex == 1 ? "男" : "女" }} | {{ scope.row.year }} |
                                    {{ scope.row.highestEducation }} |
                                    {{ scope.row.workExperience }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="jobTitle"
                                label="应聘职位"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="应聘时间"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <template>
                                        <a class="text-blue mr5" @click="changeCompanyResumeProcessState(scope.row.resumeId)">查看</a>
                                    </template>
                                    <template v-if="scope.row.feedback == 0">
                                        <a class="text-blue mr5" @click="changeCompanyResume(scope.row.id, 1)">邀请面试</a>
                                        <a class="text-red mr5" @click="changeCompanyResume(scope.row.id, -1)">不合适</a>
                                    </template>
                                    <template v-if="scope.row.feedback == 1">
                                        <a class="text-blue mr5" @click="changeCompanyResume(scope.row.id, 2)">邀请复试</a>
                                    </template>
                                    <template v-if="scope.row.feedback == 2">
                                        <a class="text-blue mr5" @click="changeCompanyResume(scope.row.id, 3)">面试通过</a>
                                        <a class="text-red mr5" @click="changeCompanyResume(scope.row.id, -2)">不合适</a>
                                    </template>
<!--                                    <a @click="deleteCompanyResume(scope.row.id)">删除</a>-->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="resumeActiveName == 'invite'">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                label="姓名"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="基本信息"
                                :show-overflow-tooltip='true'
                                width="250">
                                <template slot-scope="scope">
                                    {{ scope.row.sex == 1 ? "男" : "女" }} | {{ scope.row.year }} |
                                    {{ scope.row.highestEducation }} |
                                    {{ scope.row.workExperience }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="期望薪资"
                                :show-overflow-tooltip='true'
                                width="200">
                                <template slot-scope="scope">
                                    <span class="text-red"> {{ scope.row.salaryStart }}k - {{
                                            scope.row.salaryEnd
                                        }}k</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="应聘时间"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <template>
                                        <a class="text-blue mr5" @click="changeCompanyResumeProcessState(scope.row.resumeId)">查看</a>
                                    </template>
                                    <template v-if="scope.row.feedback == 1">
                                        <a class="text-blue mr5" @click="changeCompanyResume(scope.row.id, 2)">邀请复试</a>
                                    </template>
                                    <template v-if="scope.row.feedback == 2">
                                        <a class="text-blue mr5" @click="changeCompanyResume(scope.row.id, 3)">面试通过</a>
                                        <a class="text-red mr5" @click="changeCompanyResume(scope.row.id, -2)">不合适</a>
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="resumeActiveName == 'download'">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                label="状态">
                                <template slot-scope="scope">{{ scope.row.statusText }}</template>
                            </el-table-column>
                            <el-table-column
                                label="姓名"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="基本信息"
                                :show-overflow-tooltip='true'
                                width="250">
                                <template slot-scope="scope">
                                    {{ scope.row.sex == 1 ? "男" : "女" }} | {{ scope.row.year }} |
                                    {{ scope.row.highestEducation }} |
                                    {{ scope.row.workExperience }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="应聘职位"
                                :show-overflow-tooltip='true'
                                width="200">
                                <template slot-scope="scope">
                                    <span class="text-red"> {{ scope.row.positionName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="下载时间"
                                show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="resumeActiveName == 'star'">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                label="姓名"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="基本信息"
                                :show-overflow-tooltip='true'
                                width="250">
                                <template slot-scope="scope">
                                    {{ scope.row.sex == 1 ? "男" : "女" }} | {{ scope.row.year }} |
                                    {{ scope.row.highestEducation }} |
                                    {{ scope.row.workExperience }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="期望职位"
                                :show-overflow-tooltip='true'
                                width="150">
                                <template slot-scope="scope">
                                    <span class="text-red"> {{ scope.row.expectPosition }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="收藏时间"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <a class="text-blue mr5" @click="changeCompanyResumeProcessState(scope.row.resumeId)">查看</a>
                                    <a @click="deleteCollectionResume(scope.row.id)">删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="resumeActiveName == 'who'">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                label="姓名"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="基本信息"
                                :show-overflow-tooltip='true'
                                width="250">
                                <template slot-scope="scope">
                                    {{ scope.row.sex == 1 ? "男" : "女" }} | {{ scope.row.year }} |
                                    {{ scope.row.highestEducation }} |
                                    {{ scope.row.workExperience }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="期望职位"
                                :show-overflow-tooltip='true'
                                width="150">
                                <template slot-scope="scope">
                                    <span class="text-red"> {{ scope.row.expectPosition }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="收藏时间"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <a class="text-blue mr5" @click="changeCompanyResumeProcessState(scope.row.resumeId)">查看</a>
                                    <a @click="deleteCompanyResume(scope.row.id)">删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="table-pagination">
                    <el-pagination
                        background
                        :layout="pagination.layout"
                        :total="pagination.total"
                        :page-sizes="pagination.pageSizes"
                        :current-page.sync="pagination.page"
                        @current-change="pageChange"
                        @size-change="sizeChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    addBatchResumeDownload,
    collectResumeList, companyBrowseList, deleteBatchResumeCollection,
    deleteCompanyResumeById, deleteResumeCollectionById,
    downloadResumeList,
    editCompanyResume,
    editCompanyResumeProcessState,
    getAllCompanyInvited,
    list
} from '@/api/enterprise/work/resume'
import {
    list as allJobList
} from '@/api/enterprise/work/job'
import moment from 'moment'
import {checkResponse} from '@/utils'
import {del} from "@/api/enterprise/work/job";
import { belongsIndustryList, belongsIndustryList2, jobCategoryList } from '@/api/base'

export default {
    name: 'enterpriseWorkResume',
    components: {},
    data() {
        return {
            loading: false,
            resumeActiveName: 'resume',
            tableData: [],
            multipleSelection: [],
            jobCategoryList: [],
            ruleForm: {
                keyword: '',
                feedback: '',
                resumeSource: 1,
                status: 0,
                viewState: '',
                name: '',
                positionId: 0,
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            }
        }
    },
    created() {
        this.init()
        this.getJobCategoryList()
    },
    watch: {
        ruleForm:{
            handler(newVal, oldVal) {
                this.init(true);
            },
            immediate: true,
            deep: true
        },
        resumeActiveName() {
            this.init(true)
        }
    },
    methods: {
        init(reload = false) {
            if (reload) {
                this.loading = true;
                this.requestData.page = 1
            }
            this.getList()
        },
        getList() {
            let obj = Object.assign({...this.ruleForm}, {...this.requestData})
            switch (this.resumeActiveName) {
                case 'resume':
                    list(obj).then(res => {
                        res.data.forEach(v => {
                            switch (v.feedback) {
                                case -2:
                                    v.statusText = '不通过'
                                    break
                                case -1:
                                    v.statusText = '不合适'
                                    break
                                case 0:
                                    v.statusText = '待处理'
                                    break
                                case 1:
                                    v.statusText = '已邀请面试'
                                    break
                                case 2:
                                    v.statusText = '已邀请复试'
                                    break
                                case 3:
                                    v.statusText = '面试通过'
                                    break
                            }
                            v.time = v.applyTime ? moment(v.applyTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        })
                        this.tableData = res.data
                        this.pagination.total = res.count
                        this.loading = false;
                    })
                    break
                case 'invite':
                    getAllCompanyInvited(obj).then(res => {
                        res.data.forEach(v => {
                            v.time = moment(v.updateTime).format('YYYY-MM-DD HH:mm:ss')
                        })
                        this.tableData = res.data
                        this.pagination.total = res.count
                        this.loading = false;
                    })
                    break
                case 'download':
                    obj = {...this.requestData}
                    obj.params = {}
                    downloadResumeList(obj).then(res => {
                        res.data.forEach(v => {
                            switch (parseInt(v.feedback)) {
                                case -2:
                                    v.statusText = '不通过'
                                    break
                                case -1:
                                    v.statusText = '不合适'
                                    break
                                case 0:
                                    v.statusText = '待处理'
                                    break
                                case 1:
                                    v.statusText = '已邀请面试'
                                    break
                                case 2:
                                    v.statusText = '已邀请复试'
                                    break
                                case 3:
                                    v.statusText = '面试通过'
                                    break
                            }
                            v.time = moment(v.updateTime).format('YYYY-MM-DD HH:mm:ss')
                        })
                        this.tableData = res.data
                        this.pagination.total = res.count
                        this.loading = false;
                    })
                    break
                case 'star':
                    obj = {...this.requestData}
                    obj.params = {}
                    collectResumeList(obj).then(res => {
                        res.data.forEach(v => {
                            v.time = moment(v.collectDate).format('YYYY-MM-DD HH:mm:ss')
                        })
                        this.tableData = res.data
                        this.pagination.total = res.count
                        this.loading = false;
                    })
                    break
                case 'who':
                    obj = {...this.requestData}
                    obj.params = {}
                    companyBrowseList(obj).then(res => {
                        res.data.forEach(v => {
                            v.time = moment(v.browseTime).format('YYYY-MM-DD HH:mm:ss')
                        })
                        this.tableData = res.data
                        this.pagination.total = res.count
                        this.loading = false;
                    })
                    break
            }
        },
        resumeClick() {

        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        getJobCategoryList() {
            allJobList({ state: 1, limit: 100, page: 1}).then(res => {
                res.data.unshift({id: 0, jobTitle: '所有已发布职位'})
                this.jobCategoryList = res.data;
            })

            // jobCategoryList().then(res => {
            //     res.unshift({id: 0, name: '所有已发布职位'})
            //     this.jobCategoryList = res;
            // })
        },
        changeCompanyResume(id, feedback) {
            editCompanyResume(id, feedback).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('操作成功')
                    this.init()
                }
            })
        },
        changeCompanyResumeProcessState(id) {
            window.open(this.$router.resolve({path: '/talent-detail?id=' + id}).href, '_blank');
            editCompanyResumeProcessState(id).then(res => {
                /*if (checkResponse(res, true)) {
                    this.$message.success('操作成功')
                    this.init()
                }*/
            })
        },
        deleteCompanyResume(id) {
            let app = this;
            this.$confirm('此操作将永久删除该简历, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCompanyResumeById(id).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        deleteCollectionResume(id) {
            let app = this;
            this.$confirm('此操作将永久删除该简历, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteResumeCollectionById(id).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        batchDelete() {
            let app = this;
            let list = [];
            this.multipleSelection.forEach(v => [
                list.push(v.id)
            ])
            this.$confirm('此操作将永久删除简历, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatchResumeCollection({ids: list}).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        saveToComputer() {
            let list = [];
            this.multipleSelection.forEach(v => [
                list.push({resumeId: v.id})
            ])
            addBatchResumeDownload({resumeDownloadInfos: list}).then(res => {

            });
        },
        sendToMail() {
            this.$prompt('邮箱地址', '转发至邮箱', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
            }).then(({value}) => {
                this.$message({
                    type: 'success',
                    message: '你的邮箱是: ' + value
                })
            }).catch(() => {
            })
        }
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-resume {
    background: #FFF;
    padding: 10px 20px;

    .resume-content {
        position: relative;

        .resume-actions {
            position: absolute;
            right: 0;
            top: 0;
        }

        .resume-form {
            padding-right: 40px;
            position: relative;
            color: $text-default;

            .enterprise-tag {
                display: block;
                margin: 10px 0 30px 0;
            }

            .el-form-item__label {
                color: $text-default !important;
            }

            .single-item {
                .el-form-item__content {
                    margin-left: 0 !important;
                }
            }

            .form-row {
                margin-bottom: 10px;
                margin-left: 0 !important;
                padding: 10px 0;
                border: 1px solid #E8E8E8;

                .el-form-item {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>
